<!--
 * @Author: lijilong
 * @Date: 2024-06-16 10:19:11
 * @LastEditors: lijilong lijilong@thwater.com
 * @LastEditTime: 2024-07-23 15:14:42
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <movable-area :scale-area="true" :style="{ 'width': '98vw', 'height': '1100rpx', 'overflow': 'hidden' }">
        <movable-view direction="all" :inertia="true" out-of-bounds :scale-min="0.5" :scale-max="2" :scale="true"
            :scale-value="1" :style="{ 'width': 'auto ', 'height': 'auto' }">
            <view v-for="(table, index) in tableOptions" :key="index">
                <dynamic-table :columns="table.tableColumns" :tableData="table.data" />
            </view>
        </movable-view>
    </movable-area>
</template>

<script setup lang="ts">
import { formatByDayjs } from '@/utils/util';
import DynamicTable from './dynamicTable/index.vue';

const props = withDefaults(defineProps<{
    materialList: []
}>(), {
    materialList: () => [],
})


const tableOptions = computed(() => {
    const list = JSON.parse(JSON.stringify(props.materialList));
    if (!list) return [];
    return list.map((item) => {
        if (item.putIntoFlag && item.dosageList && item.dosageList.length) {
            item.list = item.dosageList.map(element => {
                element.paramList = item.paramList
                return element
            });
        }
        item = rowToCol(list, item);
        return item
    });
});


const rowToCol = (list, ele) => {
    let columns = []
    let data = []
    let flag;
    if (ele.putIntoFlag && ele.dosageList && ele.dosageList.length) {
        columns = [{
            label: '工序',
            prop: 'processName'
        },
        {
            label: '时间',
            prop: 'operateTime',
            width: 480
        }]
        // 有物料信息
        ele.dosageList.filter(item => item.status != 4).map(dosage => {
            const paramList = []
            ele.paramList && ele.paramList.filter(item => item.dosageId == dosage.id).map(item => {
                const name = paramList.findIndex(p => p.fieldName == item.paramName)
                if (name == -1) {
                    const columnItem = [{
                        fieldName: item.paramName,
                        paramUnit: item.paramUnit,
                        id: dosage.id,
                        label: `${item.paramName}(${item.paramUnit})`,
                        prop: 'paramValue',
                        width: 300,
                        status: item.status,
                        slot: ({ item, index, columns }) => {
                            const rowCell = item.list && item.list.find(r => r.dosageId == columns.id && r.paramName == columns.fieldName)
                            return rowCell ? rowCell.paramValue : ''
                        }
                    }]
                    paramList.push(...columnItem)
                }

            })

            paramList.unshift(
                {
                    fieldName: '用量',
                    paramUnit: dosage.unit,
                    id: dosage.id,
                    label: `用量(${dosage.unit})`,
                    prop: 'dosage',
                    width: 220,
                    status: dosage.status,
                    slot: ({ item, index, columns }) => {
                        let rowspan = item.list && item.list.find(r => r.dosageId == columns.id)
                        return rowspan ? rowspan.dosage : ''
                    }

                }
            )

            columns.push({
                label: dosage.invName,
                children: paramList
            })
        })

        let copyList = ele.paramList.map(item => {
            const t = ele.dosageList.find(p => p.id == item.dosageId)
            item.dosage = t ? t.dosage : ''
            // item.dosageList = ele.dosageList
            return item
        })
        // 获取参数最大行数
        const lenList = copyList.map(i => {
            const l = ele.paramList.filter(v => {
                return v.paramName == i.paramName && v.dosageId == i.dosageId
            })
            return l
        }).sort((a, b) => b.length - a.length)
        const list = [];
        // 每行创建去重的参数   
        for (let index = 0; index < lenList[0].length; index++) {
            list[index] = []
            let t = copyList.map((item) => {
                const name = list[index].findIndex(p => (p.paramName == item.paramName && item.dosageId == p.dosageId))
                if (name == -1) {
                    Array.isArray(item) ? '' : list[index].push(item)
                    return []
                } else {
                    return item
                }
            })
            copyList = t
        }
        list.map((item, i) => {
            data.push({
                processName: ele.processName,
                operateTime: formatByDayjs(item[0].operateTime, 'MM-DD HH:mm:ss'),
                list: item
            })
        })
        flag = 'dosage';

    } else if (ele.paramList && ele.paramList.length && ele.processName != '中控') {
        columns = [{
            label: '工序',
            prop: 'processName'
        },
        {
            label: '时间',
            prop: 'operateTime'
        }]
        // 只有参数
        let copyList = JSON.parse(JSON.stringify(ele.paramList))
        ele.paramList && ele.paramList.filter(i => i.status != 4).map(item => {
            const name = columns.findIndex(p => p.fieldName == item.paramName)
            if (name == -1) {
                const columnItem = {
                    fieldName: item.paramName,
                    paramUnit: item.paramUnit,
                    label: `${item.paramName}(${item.paramUnit})`,
                    prop: 'paramValue',
                    status: item.status,
                    slot: ({ item, index, columns }) => {
                        const rowspan = item.list && item.list.find(r => r.paramName == columns.fieldName)
                        return rowspan ? rowspan.paramValue : ''
                    }
                }
                columns.push(columnItem)
            }
        })
        // 获取参数最大行数
        const lenList = columns.map(i => {
            const l = ele.paramList.filter(v => v.paramName == i.fieldName)
            return l
        }).sort((a, b) => b.length - a.length)
        const list = [];
        // 每行创建去重的参数   
        for (let index = 0; index < lenList[0].length; index++) {
            list[index] = []
            let t = copyList.map((item) => {
                const name = list[index].findIndex(p => p.paramName == item.paramName)
                if (name == -1) {
                    Array.isArray(item) ? '' : list[index].push(item)
                    return []
                } else {
                    return item
                }
            })
            copyList = t
        }
        list.map((item, i) => {
            data.push({
                processName: ele.processName,
                operateTime: formatByDayjs(item[0].operateTime, 'MM-DD HH:mm:ss'),
                list: item
            })
        })
        flag = 'param';
    } else if (ele.processName == '中控') {
        columns = [{
            label: '工序',
            prop: 'processName'
        }, {
            label: '分析手段',
            prop: 'analysisName'
        }, {
            label: '检验指标手段',
            prop: 'paramName'
        }, {
            label: '取样实际描述',
            prop: 'sampleDesc'
        }, {
            label: '取样时机',
            prop: 'sampleTime'
        }]
        flag = 'zk';

        data = ele.paramList.filter(i => i.status != 4).map(item => {
            item.processName = ele.processName
            return item
        })
    } else {
        columns = [{
            label: '工序',
            prop: 'processName'
        }]
        // 只有工序
        data = [{
            processName: ele.processName,
        }]
    }


    if (['dosage', 'param'].includes(flag)) {
        data.unshift({
            processName: ele.processName,
            paramValue: '-',
            title: '开始',
            operateTime: '开始：' + ele.startTime,
        })
        data.push({
            processName: ele.processName,
            paramValue: '-',
            title: '结束',
            operateTime: '结束：' + ele.endTime,
        })
    }
    return {
        tableColumns: columns,
        data,
        flag
    }
}


</script>